<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆日志</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        .search-bar {
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #e0e0e0;
        }
        .search-input {
            display: flex;
            align-items: center;
        }
        .search-input input {
            width: 250px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .search-input button {
            margin-left: 10px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 8px;
            cursor: pointer;
        }
        .actions {
            display: flex;
            align-items: center;
        }
        .btn {
            padding: 8px 12px;
            margin-left: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            color: #fff;
            font-size: 14px;
        }
        .btn-refresh {
            background-color: #409eff;
        }
        .btn-logout {
            background-color: #909399;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 12px 15px;
            text-align: center;
            border-bottom: 1px solid #eee;
        }
        th {
            background-color: #f8f8f8;
            font-weight: normal;
        }
        tr:hover {
            background-color: #f9f9f9;
        }
        .detail-btn {
            padding: 5px 10px;
            background-color: #409eff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="search-bar">
            <div class="search-input">
                <input type="text" placeholder="输入人/模块名称/行为/操作时间">
                <button type="button">
                    <svg viewBox="0 0 1024 1024" width="16" height="16">
                        <path d="M945.066667 898.133333l-189.866667-189.866666c55.466667-64 87.466667-149.333333 87.466667-241.066667 0-204.8-168.533333-373.333333-373.333334-373.333333S96 264.533333 96 469.333333 264.533333 842.666667 469.333333 842.666667c91.733333 0 174.933333-34.133333 241.066667-87.466667l189.866667 189.866667c6.4 6.4 14.933333 8.533333 23.466666 8.533333s17.066667-2.133333 23.466667-8.533333c8.533333-12.8 8.533333-34.133333-2.133333-46.933334zM469.333333 778.666667C298.666667 778.666667 160 640 160 469.333333S298.666667 160 469.333333 160 778.666667 298.666667 778.666667 469.333333 640 778.666667 469.333333 778.666667z" fill="#666666"></path>
                    </svg>
                </button>
            </div>
            <div class="actions">
                <button type="button" class="btn btn-refresh">高级筛选</button>
                <button type="button" class="btn btn-logout">导出</button>
            </div>
        </div>
        <table>
            <thead>
                <tr>
                    <th>登陆人</th>
                    <th>人员编号（登陆账号）</th>
                    <th>联系电话（登陆账号）</th>
                    <th>登陆时间</th>
                    <th>IP地址</th>
                    <th>浏览器</th>
                    <th>系统系统</th>
                    <th>登陆时长（小时）</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>陈欣清</td>
                    <td>RY0001</td>
                    <td>13888888888</td>
                    <td>2022-06-02 11:16</td>
                    <td>127.0.0.1</td>
                    <td>Chrome</td>
                    <td>Windows</td>
                    <td>5.0</td>
                    <td><button class="detail-btn">详情</button></td>
                </tr>
                <tr>
                    <td>王五</td>
                    <td>RY0002</td>
                    <td>13888888889</td>
                    <td>2022-08-19 05:52</td>
                    <td>127.0.0.1</td>
                    <td>Edge</td>
                    <td>Windows</td>
                    <td>5.0</td>
                    <td><button class="detail-btn">详情</button></td>
                </tr>
                <tr>
                    <td>王乐意</td>
                    <td>RY0003</td>
                    <td>13888888881</td>
                    <td>2023-11-25 14:26</td>
                    <td>127.0.0.1</td>
                    <td>Chrome</td>
                    <td>Windows</td>
                    <td>5.0</td>
                    <td><button class="detail-btn">详情</button></td>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>RY0004</td>
                    <td>13888888882</td>
                    <td>2022-09-01 07:53</td>
                    <td>127.0.0.1</td>
                    <td>Chrome</td>
                    <td>Windows</td>
                    <td>5.0</td>
                    <td><button class="detail-btn">详情</button></td>
                </tr>
                <tr>
                    <td>王禹</td>
                    <td>RY0005</td>
                    <td>13888888883</td>
                    <td>2023-07-28 09:40</td>
                    <td>127.0.0.1</td>
                    <td>Edge</td>
                    <td>Windows</td>
                    <td>5.0</td>
                    <td><button class="detail-btn">详情</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        document.querySelectorAll('.detail-btn').forEach(button => {
            button.addEventListener('click', function() {
                const row = this.closest('tr');
                const loginUser = row.cells[0].textContent;
                const userId = row.cells[1].textContent;
                const loginTime = row.cells[3].textContent;
                
                alert(`用户详情：\n登录人：${loginUser}\n用户ID：${userId}\n登录时间：${loginTime}`);
            });
        });
    </script>
</body>
</html>
